<script setup>
import { createApp } from 'vue';
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'
import { RouterLink, useRouter } from "vue-router";
import axios from "axios";

const app = createApp();
app.config.globalProperties.$filters = {
  formatCurrency(value) {
    return `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`;
  }
};

const props = defineProps({
  message: String
});

const store = useStore()

const ordersSession = reactive([])//这是一个数组
const order_form = reactive({
  orderId: "",
  username: "",
  orderDate:"",
  shipAddress1:"",
  shipAddress2:"",
  shipCity:'',
  shipState:'',
  shipZip:'',
  shipCountry:'',
  billAddress1:'',
  billAddress2:'',
  billCity:'',
  billZip:'',
  billCountry:'',
  billState:'',
  courier:'',
  totalPrice:'',
  billToFirstName:'',
  billToLastName:'',
  shipToFirstName:'',
  shipToLastName:'',
  creditCard:'',
  expiryDate:'',
  cardType:'',
  locale:'',
  status:'',
  state:'',
  sendOut:'',
  lineItems:[
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    }
  ]
})

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData()
})

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

const getData = () => {
  //测试后端向前端传数据，成功！
  api.getNewOrderForm().then(res => {
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : "+statusCode);
    if (statusCode == "400"){
      console.log(res.data.message);
      //这里还要写一个逻辑，跳转到登录界面，还没写
    }else if (statusCode == "200"){
      ordersSession.splice(0, ordersSession.length)//清空旧数据
      ordersSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
      console.log(ordersSession);
      console.log('lineItems length is:'+ordersSession[0].lineItems.length);
      console.log('lineItems first item itemId is:'+ordersSession[0].lineItems[0].item.itemId);
      //存给order_form
      order_form.orderId=ordersSession[0].orderId;
      order_form.username=ordersSession[0].username;
      order_form.orderDate=ordersSession[0].orderDate;
      order_form.shipAddress1=ordersSession[0].shipAddress1;
      order_form.shipAddress2=ordersSession[0].shipAddress2;
      order_form.shipCity=ordersSession[0].shipCity;
      order_form.shipState=ordersSession[0].shipState;
      order_form.shipZip=ordersSession[0].shipZip;
      order_form.shipCountry=ordersSession[0].shipCountry;
      order_form.billAddress1=ordersSession[0].billAddress1;
      order_form.billAddress2=ordersSession[0].billAddress2;
      order_form.billCity=ordersSession[0].billCity;
      order_form.billZip=ordersSession[0].billZip;
      order_form.billCountry=ordersSession[0].billCountry;
      order_form.billState=ordersSession[0].billState;
      order_form.courier=ordersSession[0].courier;
      order_form.totalPrice=ordersSession[0].totalPrice;
      order_form.billToFirstName=ordersSession[0].billToFirstName;
      order_form.billToLastName=ordersSession[0].billToLastName;
      order_form.shipToFirstName=ordersSession[0].shipToFirstName;
      order_form.shipToLastName=ordersSession[0].shipToLastName;
      order_form.creditCard=ordersSession[0].creditCard;
      order_form.expiryDate=ordersSession[0].expiryDate;
      order_form.cardType=ordersSession[0].cardType;
      order_form.locale=ordersSession[0].locale;
      order_form.status=ordersSession[0].status;
      order_form.state=ordersSession[0].state;
      order_form.sendOut=ordersSession[0].sendOut;
      order_form.lineItems=ordersSession[0].lineItems;
      console.log(order_form.orderId);//证明可行，阶段性胜利！
      console.log(order_form.username);
      console.log('order_form.lineItems.length is: '+order_form.lineItems.length);
      console.log(order_form.lineItems);

      //存给ordersSession，持久化对象，这就是前端存储session的方法！一共28个属性！
      store.commit("setOrderOrderId",ordersSession[0].orderId);
      store.commit("setOrderUsername",ordersSession[0].username);
      store.commit("setOrderOrderDate",ordersSession[0].orderDate);
      store.commit("setOrderShipAddress1",ordersSession[0].shipAddress1);
      store.commit("setOrderShipAddress2",ordersSession[0].shipAddress2);
      store.commit("setOrderShipCity",ordersSession[0].shipCity);
      store.commit("setOrderShipState",ordersSession[0].shipState);
      store.commit("setOrderShipZip",ordersSession[0].shipZip);
      store.commit("setOrderShipCountry",ordersSession[0].shipCountry);
      store.commit("setOrderBillAddress1",ordersSession[0].billAddress1);
      store.commit("setOrderBillAddress2",ordersSession[0].billAddress2);
      store.commit("setOrderBillCity",ordersSession[0].billCity);
      store.commit("setOrderBillZip",ordersSession[0].billZip);
      store.commit("setOrderBillCountry",ordersSession[0].billCountry);
      store.commit("setOrderBillState",ordersSession[0].billState);
      store.commit("setOrderCourier",ordersSession[0].courier);
      store.commit("setOrderTotalPrice",ordersSession[0].totalPrice);
      store.commit("setOrderBillToFirstName",ordersSession[0].billToFirstName);
      store.commit("setOrderBillToLastName",ordersSession[0].billToLastName);
      store.commit("setOrderShipToFirstName",ordersSession[0].shipToFirstName);
      store.commit("setOrderShipToLastName",ordersSession[0].shipToLastName);
      store.commit("setOrderCreditCard",ordersSession[0].creditCard);
      store.commit("setOrderExpiryDate",ordersSession[0].expiryDate);
      store.commit("setOrderCardType",ordersSession[0].cardType);
      store.commit("setOrderLocale",ordersSession[0].locale);
      store.commit("setOrderStatus",ordersSession[0].status);
      store.commit("setOrderState",ordersSession[0].state);
      store.commit("setOrderSendOut",ordersSession[0].sendOut);
      store.commit("setOrderLineItems",ordersSession[0].lineItems);
      //测试
      console.log(store.state.Order_orderId);
      console.log(store.state.Order_username);
      console.log(store.state.Order_shipAddress1);
      console.log(store.state.Order_shipAddress2);
      console.log(store.state.Order_orderDate);
      //测试lineItems
      console.log(store.state.Order_lineItems);
    }
  })
}


</script>



<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->

      <div id="BackLink">
        <a href="main">Return to Main Menu</a>
      </div>

      <div class="Order" align="center">
<!--        <h2><strong>${sessionScope.message}</strong></h2>-->
        <table class="table-2 firstTable">
          <tr>
            <th align="center" colspan="2">
              订单#
              {{ order_form.orderDate}}
            </th>
          </tr>
          <br>
          <tr>
            <th colspan="2">支付细节</th>
          </tr>
          <tr>
            <td>支付方式:</td>
            <td>{{store.state.cardExist}}</td>
          </tr>
          <br>
          <tr>
            <th colspan="2">账单细节</th>
          </tr>
          <tr>
            <td>姓:</td>
            <td>{{order_form.billToFirstName}}</td>
          </tr>
          <tr>
            <td>名:</td>
            <td>{{order_form.billToLastName}}</td>
          </tr>
          <tr>
            <td>地址1:</td>
            <td>{{order_form.billAddress1}}</td>
          </tr>
          <tr>
            <td>地址2:</td>
            <td>{{order_form.billAddress2}}</td>
          </tr>
          <tr>
            <td>城市:</td>
            <td>{{order_form.billCity}}</td>
          </tr>
          <tr>
            <td>省份:</td>
            <td>{{order_form.billState}}</td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td>{{order_form.billZip}}</td>
          </tr>
          <tr>
            <td>国家:</td>
            <td>{{order_form.billCountry}}</td>
          </tr>
          <br>
          <tr>
            <th colspan="2">寄送地址</th>
          </tr>
          <tr>
            <td>姓:</td>
            <td>{{order_form.shipToLastName}}</td>
            </tr>
          <tr>
            <td>名:</td>
            <td>{{order_form.shipToFirstName}}</td>
            </tr>
          <tr>
            <td>地址1:</td>
            <td>{{order_form.shipAddress1}}</td>
            </tr>
          <tr>
            <td>地址2:</td>
            <td>{{order_form.shipAddress2}}</td>
            </tr>
          <tr>
            <td>城市:</td>
            <td>{{order_form.shipCity}}</td>
          </tr>
          <tr>
            <td>省份:</td>
            <td>{{order_form.shipState}}</td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td>{{order_form.shipZip}}</td>
          </tr>
          <tr>
            <td>国家:</td>
            <td>{{order_form.shipCountry}}</td>
          </tr>
          <tr>
            <td>邮差:</td>
            <td>{{order_form.courier}}</td>
          </tr>
          <tr>
            <td>状态:</td>
            <td>{{order_form.status}}</td>
          </tr>
        </table>
        <br>
        <h2><strong>商品细节</strong></h2>

        <table class="table-2 secondTable">
          <tr>
            <th>商品ID</th>
            <th>商品描述</th>
            <th>数量</th>
            <th>价格</th>
          </tr>
          <tr v-for="lineItem in order_form.lineItems" :key="lineItem.itemId">
            <td>
              <a href="#">{{lineItem.item.itemId}}</a>
            </td>
            <td v-if="lineItem.item !== null">
              {{lineItem.item.attribute1}}
              {{lineItem.item.attribute2}}
              {{lineItem.item.attribute3}}
              {{lineItem.item.attribute4}}
              {{lineItem.item.productId}}
            </td>
            <td v-if="lineItem.item == null">
              <i>{description unavailable}</i>
            </td>
            <td>{{lineItem.quantity}}</td>
            <td>{{ lineItem.unitPrice | formatCurrency }}</td>
            <td>{{ lineItem.total | formatCurrency }}</td>
          </tr>
          <tr>
            <td colspan="5">
              总价: {{ order_form.totalPrice | formatCurrency }}
            </td>
          </tr>
        </table>
      </div>

      <!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>
</template>


<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>